<template>
	<div class="row-me">
		<el-button type="primary" @click="clickImg" class="width100 height40 margin-right20">上传图片</el-button>
		<vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig"
			:editorDependencies="['ueditor.config.js','ueditor.all.js']" style="width: 80%;" />

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		props: {
			value: String,
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		components: {
			imgLibrary
		},
		watch: {
			value(val) { //普通的watch监听
				this.content = val
			}
		},
		computed: {
			content(val) {
				console.log(this.content, val, "pll")
			},
		},
		data() {
			return {
				editorConfig: {
					serverUrl: process.env.BASE_API + "/file/upload",
					UEDITOR_HOME_URL: '/static/UEditor/'
				},
				content: ''
			}
		},
		methods: {
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			handleImgOk(data) {
				this.content = this.content + `<img src=${data}>`
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .edui-editor,
	/deep/ .edui-editor-iframeholder {
		width: 100% !important;
	}
</style>